<template>
  <div class="main">
    <div class="main-1">
      <div class="main-2">
        <el-form
          ref="ruleFormRef"
          :model="state.tableData"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="成员账号" prop="adminAccount">
            <el-input
              v-model="state.tableData.adminAccount"
              placeholder="输入成员名称"
            />
          </el-form-item>
          <el-form-item label="成员姓名" prop="name">
            <el-input
              v-model="state.tableData.name"
              placeholder="输入成员姓名"
            />
          </el-form-item>
          <el-form-item
            prop="email"
            label="Email"
            :rules="[
              {
                required: true,
                message: 'Please input email address',
                trigger: 'blur',
              },
              {
                type: 'email',
                message: 'Please input correct email address',
                trigger: ['blur', 'change'],
              },
            ]"
          >
            <el-input v-model="state.tableData.email" />
          </el-form-item>
          <el-form-item label="所属部门" prop="departmentId">
            <el-select
              v-model="state.tableData.departmentId"
              placeholder="请选择"
            >
              <el-option
                v-for="item in state1.department"
                :value="item.id"
                :key="item.id"
                :label="item.departmentName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属场馆">
            <el-checkbox-group
              v-for="(item, index) in state1.venue"
              v-model="state.checkedBox"
              class="ml-4 checkbox"
            >
              <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="是否为管理人员">
            <el-radio-group v-model="state.radioBox" class="ml-4">
              <el-radio label="0" size="large">是</el-radio>
              <el-radio label="1" size="large">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="登录密码" prop="password">
            <el-input v-model="state.tableData.password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password2">
            <el-input v-model="state.tableData.password2"></el-input>
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input
              v-model="state.tableData.remark"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="modify">
              确定修改
            </el-button>
            <el-button @click="Return">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { department, editID, modifyMember, venueList } from '../../http/api'

var state:any = reactive({ tableData: [], checkedBox: [], radioBox: '' })
var state1:any = reactive({ department: [], venue: [] })
var gymVenueIds = ref([])
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const route = useRoute()
onMounted(() => {
  department().then((res) => {
    state1.department = res.data
  })
  editID({ id: route.query.id }).then((res) => {
    console.log(res);
    
    state.checkedBox = JSON.parse(
      JSON.stringify(res.data.gymVenueIds.split(',')),
    ).map(Number)
    state.radioBox = String(res.data.isSalesperson)
    state.tableData = res.data
  })

  getVenues()
})
const rules = reactive<FormRules>({
  adminAccount: [
    { required: true, message: '请输入你的账号', trigger: 'blur' },
    { min: 6, max: 10, message: '长度6-10位', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入你的名称', trigger: 'blur' },
    { min: 2, max: 5, message: '长度2-5位', trigger: 'blur' },
  ],
  departmentId: [
    {
      required: true,
      message: '所属部门不能为空',
      trigger: ['blur', 'change'],
    },
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur',
    },
  ],
  password2: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur',
    },
  ],
})

// 修改
function modify() {
  console.log(state.checkedBox)
  // state.tableData.venueIds = state.tableData.venueIds.split(',')
  // console.log(state.tableData.venueIds)
  state.tableData.gymVenueIds = state.checkedBox
  console.log(state.tableData.gymVenueIds)
  modifyMember({
    id: Number(route.query.id),
    adminAccount: state.tableData.adminAccount,
    email: state.tableData.email,
    gymVenueIds: state.checkedBox,
    isSalesperson: state.radioBox,
    name: state.tableData.name,
    password: state.tableData.password,
    password2: state.tableData.password2,
    remark: state.tableData.remark,
  }).then((res) => {
    console.log(state)
    if (res.data.code === 0) {
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
      router.push({ path: 'MemberManagement', query: { msg: '返回' } })
    } else if (res.data.code === 50000) {
      ElMessage({
        message: res.data.msg,
        type: 'warning',
      })
    }
  })
}
//获取场馆
const getVenues: any = () => {
  venueList().then((res) => {
    state1.venue = res.data
  })
}
const router = useRouter()
function Return() {
  router.push({ path: 'MemberManagement', query: { msg: '返回' } })
}
</script>

<style scoped>
.main {
  width: 100%;
  margin: auto;
  background-color: #f2f2f2;
  height: 1000px;
  padding: 15px 20px;
  border-radius: 15px;
}
.main-1 {
  width: 96%;
  margin: auto;
  background-color: white;
  padding: 15px 20px;
  border-radius: 15px;
}
.main-2 {
  border: 1px solid #e4e4e4;
  padding: 15px 20px;
  border-radius: 15px;
}
.demo-ruleForm {
  width: 60%;
  margin: auto;
}
.checkbox {
  margin: 0 15px;
}
</style>
